import Taro, { getCurrentInstance } from "@tarojs/taro"
import type { TaroElement } from "@tarojs/runtime/dist/dom/element"

export const getWindowInfo: IFnWithProps<
  Partial<{ windowInfo: IWindowInfo }>,
  IWindowInfo
> = () => {
  if (getWindowInfo.windowInfo) return getWindowInfo.windowInfo
  try {
    const res = Taro.getSystemInfoSync()
    const menuButtonRect = Taro.getMenuButtonBoundingClientRect()
    getWindowInfo.windowInfo = {
      width: res.windowWidth,
      height: res.windowHeight,
      statusBarHeight: res.statusBarHeight,
      menuButtonRect
    }
    return getWindowInfo.windowInfo
  } catch (e) {
    console.log("[getSystemInfoSync] error: ", e)
    return getWindowInfo()
  }
}
export const htmlTransform = () => {
  Taro.options.html.transformElement = (el: TaroElement) => {
    if (el.nodeName === "image") {
      const styleWidth: string = el.style.getPropertyValue("width") || ""
      const imageSrc = el.getAttribute("src")
      let hasParentElement = false
      if (el.parentElement) {
        if (el.parentElement.parentElement) {
          hasParentElement = true
        }
      }
      if (!hasParentElement || styleWidth.endsWith("%")) {
        el.setAttribute("mode", "widthFix")
      }
      const { width: windowWidth } = getWindowInfo()
      const pxMatch = styleWidth.match(/(\d+)px/)
      if (pxMatch) {
        const pxValue = Number(pxMatch[1])
        setWidth(pxValue)
      } else {
        el.addEventListener(
          "load",
          function (res) {
            const { width } = res.detail
            setWidth(width)
          },
          false
        )
      }
      el.addEventListener(
        "tap",
        function () {
          const url = imageSrc
          if (url) {
            Taro.previewImage({
              current: url,
              urls: [url]
            })
          }
        },
        false
      )
      function setWidth(width: number) {
        let w = "100%"
        if (windowWidth > width) {
          w = width + "px"
        }
        el.style.setProperty("width", w)
      }
    }
    // 当前元素是view,有子节点,
    // if (el.nodeName === "view" && el.hasChildNodes()) {
    //   const firstChild = el.firstChild
    //   console.log("firstchild----------", firstChild)
    //   // 子节点是文本节点
    //   // 如 <view>文本</view> 或 <view><text>文本</text></view>
    //   if (firstChild && (firstChild.nodeType === 3 || firstChild.nodeName === "text")) {
    //     const span = document.createElement("text") as unknown as TaroElement
    //     span.dataset = el.dataset
    //     span.childNodes = el.childNodes
    //     span.textContent = el.textContent
    //     span.id = el.id
    //     span.style = el.style
    //     span.className = el.className
    //     span.props = el.props
    //     span.setAttribute("user-select", true)
    //     span.setAttribute("decode", true)
    //     return span
    //   }
    // }
    return el
  }
}
/** 渲染后端是否为skyline */
export function isSkyline() {
  return getCurrentInstance().page?.renderer === "skyline"
}
